<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <child sex="男" :age="age" :username="username" ></child>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            age:12,
            username:"zhangsan",
        },
        components:{
            Child:{
                props:{
                    username: String,
                    age : Array,
                    sex :{
                        type :String,
                        required : true,
                        default : '女'
                    },
                    num : {
                        type : Array,
                        default(){
                            return [1,2,3]
                        }
                    }
                },
                template:(`
				    <div>
				        <p>username:{{username}}</p>
				        <p>age:{{age}}</p>
				        <p>sex:{{sex}}</p>
				        <p>num:{{num}}</p>
                    </div>
				`),
            }
        }
    })
</script>
</html>